<template>
    <view class="jiaoyi">
        <view class="title">交易</view>
        <view class="info">
            <p class="p1">模拟账号：123451234</p>
            <p class="p2">
                <span>-1400.00</span>浮动盈利
            </p>
        </view>
        <view class="line"></view>
        <view class="list">
            <QSTabs
                activeColor="#3a73fe"
                :current="current_1"
                :tabs="tabs_1"
                width="250"
                @change="change($event, '1')"
            />
			<ul v-if="current_1 === 0" class="info1">
				<li class="item1" v-for="(item,index) in 2" :key="index">
					<view class="top">
						<view class="left">
							<p class="p1">OX币</p>
							<view class="p2">
								<span>7320.6</span>
								<img :src="logo" alt="">
								<span class="green" :class="{'isRed':true}">7301.2</span>
								<img v-if="true" :src="logo" alt="">
								<img v-else :src="logo" alt="">
							</view>
							<view class="p3">
								<view class="p31">
									<p>买入：10.00手</p>
									<p>止盈：0.00</p>
								</view>
								<view class="p32">
									<p>利息：0.00</p>
									<p>止损：0.00</p>
								</view>
							</view>
						</view>
						<view class="right">
							<p class="p1">231231412321313</p>
							<h2>-1400.20</h2>
							<p class="p2">2019-11-04 21:07</p>
						</view>
					</view>
					<view class="bottom" v-if="!item.show">
						<view @click="clickHangqing(item)">行情</view>
						<view @click="clickPingchang(item)">平仓</view>
						<view @click="clickYingsun" class="noborder">设置盈损</view>
					</view>
				</li>
			</ul>
			<ul v-if="current_1 === 1" class="info2">
				<li class="item" v-for="(item,index) in 2" :key="index">
					<view class="top">
						<p class="p1">TOK币</p>
						<p class="p2">卖出：<span>1</span>手</p>
						<p class="p3">123912931412132112</p>
					</view>
					<view class="bottom">
						<view class="b1">
							<p>挂单价格：<span>56.230</span></p>
							<p>止盈：<span>0.00</span></p>
						</view>
						<view class="b2">
							<p>当周有效</p>
							<p>止损：<span>0.00</span></p>
						</view>
						<view class="b3">
							<view>
								<span class="green">56.530</span>
								<img :src="logo" alt="">
							</view>
							<p>2019-11-06 19:54</p>
						</view>
					</view>
				</li>
			</ul>
        </view>
		<xy-dialog 
			ref="xyDialog1"
			content=""
			:show="show1"
			@cancelButton="clickCancel"
			@confirmButton="clickConfirm">
			<view style="padding: 0 30upx 30upx;">
				<view class="pingchang">
					<view class="title">OX币</view>
					<view class="content">
						<view class="con1">
							<view class="maichu">
								<p class="p1">卖出</p>
								<p class="green">7293.0</p>
								<img :src="logo" alt="">
							</view>
							<view class="maichu">
								<p class="p1">卖出</p>
								<p class="green">7293.0</p>
								<img :src="logo" alt="">
							</view>
						</view>
						<view class="con2">
							<div class="label">
								<span class="left">
									浮动盈亏
								</span>
								<span class="right green">
									+159.32
								</span>
							</div>
							<div class="label">
								<span class="left">
									平仓手数
								</span>
								<span class="right">
									<uni-number-box :min="-1000000" :max="10000000" :step='1' :value="numValue1"></uni-number-box>
								</span>
							</div>
							<div class="label">
								<span class="left">
									开仓价格
								</span>
								<span class="right">
									+159.32
								</span>
							</div>
							<div class="label">
								<span class="left">
									开仓时间
								</span>
								<span class="right">
									2019-11-06 19:56
								</span>
							</div>
						</view>
					</view>
				</view>
			</view>
		</xy-dialog>
		<xy-dialog 
			ref="xyDialog2"
			content=""
			:show="show1"
			@cancelButton="clickCancel"
			@confirmButton="clickConfirm">
			<view style="padding: 0 30upx 30upx;">
				<view class="yingsun">
					<view class="title">OX币</view>
					<view class="content">
						<view class="cell">
							<view class="left1">
								止损
							</view>
							<view class="right1">
								<uni-number-box :min="-1000000" :max="10000000" :step='1' :value="numValue2"></uni-number-box>
							</view>
							<view class="bom">
								7323.0 ~ 2302.2
							</view>
						</view>
						<view class="cell">
							<view class="left1">
								止盈
							</view>
							<view class="right1">
								<uni-number-box :min="-1000000" :max="10000000" :step='1' :value="numValue3"></uni-number-box>
							</view>
							<view class="bom">
								7323.0 ~ 2302.2
							</view>
						</view>
					</view>
						
				</view>
			</view>
		</xy-dialog>
    </view>
</template>

<script>
import QSTabs from "@/components/QS-tabs/QS-tabs.vue";
import logo from "../../../static/logo.png";
import xyDialog from '@/components/xy-dialog/xy-dialog.vue';
import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue"
export default {
    components: { QSTabs, xyDialog,uniNumberBox },
    data() {
        return {
            tabs_1: ["持仓", "挂单", "历史记录"],
			current_1: 0,
			logo,
			show1:false,
			numValue1:0,
			numValue2:0,
			numValue3:0,
        };
    },
    methods: {
        change(index, i) {
            this["current_" + i] = index;
		},
		clickCancel(){
			this.show1 = false
			console.log(1)
		},
		clickConfirm(){
			console.log(2)
		},
		clickHangqing(item){
			
		},
		clickPingchang(item){
			this.$refs.xyDialog1.show()
		},
		clickYingsun(item){
			this.$refs.xyDialog2.show()
		}
    }
};
</script>

<style lang="less">
*{
	padding: 0;
}
.jiaoyi {
    .title {
        height: 80upx;
        width: 100%;
        text-align: center;
        line-height: 80upx;
    }
    .info {
		padding-top: 60upx;
		padding-left: 0;
        .p1 {
            margin-left: 40upx;
            font-size: 30upx;
			color: #999;
        }
        .p2 {
			margin-left: 40upx;
			color: #999;
            line-height: 100upx;
            font-size: 30upx;
            span {
				color: #000;
                font-size: 56upx;
                margin-right: 20upx;
            }
        }
	}
	.list{
		.QS-tabs{
			border-bottom: 1px solid #ddd;
		}
		.item{
			width: 700upx;
			margin: 0 25upx;
			display: flex;
			justify-content: space-between;
			.left{
				img{
					width: 30upx;
					height: 30upx;
				}
			}
			.right{

			}
		}
	}
	.info1{
		.item1{
			.top{
				width: 700upx;
				margin: 0 25upx;
				border-bottom: 1px solid #ccc;
				padding-bottom: 16upx;
				// width: 100%;
				display: flex;
				justify-content: space-between;
				.left{
					width: 50%;
					img{
					width: 30upx;
					height: 30upx;
				}
					.p1{
						font-weight: 900;
						line-height: 70upx;
						margin-top: 20upx;
					}
					.p2{
						font-size: 32upx;
						margin-top: 10upx;
						.green{
							color: rgb(51, 190, 51);
							&.isRed{
								color: #f64e45;
							}
						}
					}
					.p3{
						display: flex;
						justify-content: space-between;
						width: 100%;
						font-size: 28upx;
						line-height: 50upx;
						margin-top: 10upx;
						color: #999;
					}
				}
				.right{
					text-align: right;
					p{
						color: #999;
					}
					.p1{
						font-size: 28upx;
						margin-top: 30upx;
					}
					h2{
						font-size: 50upx;
						margin-top: 50upx;
						color: rgb(51, 190, 51);
						font-weight: normal;
					}
					.p2{
						font-size: 28upx;
						margin-top: 20upx;
					}
				}
			}	
			.bottom{
				width: 100%;
				display: flex;
				height: 70upx;
				background-color: #ddd;
				// justify-content: space-around;
				text-align: center;
				line-height: 28upx;
				view{
					width: 33.3%;
					margin: 21upx 0;
					font-size: 28upx;
					color: #666;
					border-right: 1px solid #666;
					&.noborder{
						border: none;
					}
				}
			}
		}
	}
	.info2{
		.item{
			display: flex;
			flex-direction:column;
			border-bottom: 1px solid #ccc;
			padding-bottom: 16upx;
			.top{
				font-size: 28upx;
				width: 100%;
				color: #999;
				display: flex;
				padding-top: 30upx;
				justify-content: space-between;
				.p1{
					width: 20%;
					color: #000;
					font-size: 32upx;
				}
				.p2{
					width: 30%;
				}
				.p3{
					width: 50%;
					text-align: right;
				}
			}
			.bottom{
				width: 100%;
				margin-top: 20upx;
				display: flex;
				font-size: 28upx;
				line-height: 50upx;
				color: #999;
				justify-content: space-between;
				img{
					width: 20upx;
					height: 20upx;
				}
				.b3{
					text-align: right;
					span{
						font-size: 36upx;
						color: rgb(51, 190, 51);
						margin-right: 10upx;
					}
				}
			}
		}
	}
	.pingchang{
		.title{
			height: 60upx;
			font-size: 36upx;
			color: #000;
		}
		.content{
			padding-top: 20upx;
			.con1{
				display: flex;
				justify-content: space-between;
				font-size: 28upx;
				line-height: 40upx;
				img{
					width: 20upx;
					height: 20upx;
					margin-top: 10upx;
					margin-left: 6upx;
				}
				.maichu{
					display: flex;
					.p1{
						color: #aaa;
						margin-right: 20upx;
					}
					.green{
						color: rgb(51, 190, 51);
						&.isred{
							color: #f64e45;
						}
					}
				}
			}
			.con2{
				padding-top: 20upx;
				.label{
					display: flex;
					height: 70upx;
					line-height: 70upx;
					font-size: 28upx;
					.left{
						width: 140upx;
						text-align: left;
					}
					.right{
						color: #999;
					}
					.green{
						color: rgb(51, 190, 51);
						&.isred{
							color: #f64e45;
						}
					}
				}
			}
		}
	}
	.yingsun{
		.title{
			height: 60upx;
			font-size: 36upx;
			color: #000;
		}
		.content{
			padding-top: 30upx;
			font-size: 30upx;
			line-height: 80upx;
			.cell{
				display: flex;
				height: 150upx;
				justify-content: space-between;
				position: relative;
				.bom{
					position: absolute;
					bottom: 6upx;
					color: #999;
					right: 0upx;
				}
			}
		}
	}
}
</style>
